<template>
    <div>
        <top-bar></top-bar>
        <left-bar  :datas='data'></left-bar>
          <div class="system">
             <home-bar :currentPage='currentPage'></home-bar>
            <div class="system-main">
                 <div class="main-position">
                     首页  >   系统设置  >   推荐管理
                     <a href="javascript:void(0);"><i class="el-icon-refresh"></i></a>
                 </div>
                <div class="main-height"></div>
                <div class="main-mains">
                    <div class="main-top-nav">
                        <ul>
                            <router-link to="/system" @click.native="addPath('/system','系统设置')">
                                <li>商户资料</li>
                            </router-link>
                            <router-link to="/systemSafe" @click.native="addPath('/systemSafe','系统设置')">
                                <li>安全设置</li>
                            </router-link>
                            <router-link to="/systemStockAlert" @click.native="addPath('/systemStockAlert','系统设置')">
                                <li>库存预警设置</li>
                            </router-link>
                           <router-link  to="/recommend" @click.native="addPath('/recommend','系统设置')">
                                <li>我要推荐</li> 
                            </router-link>
                            <router-link to="/recommends" @click.native="addPath('/recommends','系统设置')">
                                <li class="active">推荐管理</li>
                            </router-link>
                            <router-link to="/about" @click.native="addPath('/about','系统设置')">
                                <li>关于我们</li>
                            </router-link>
                        </ul>
                    </div>
                    <div class="system-recommend">
                        <div class="system-recommend-table">
                            <table>
                                <tr>
                                    <td>
                                        序号
                                    </td>
                                    <td>
                                        邀请方式
                                    </td>
                                    <td>
                                        客户名称
                                    </td>
                                    <td>
                                        注册日期
                                    </td>
                                    <td>
                                        状态
                                    </td>
                                    <td>
                                        累计交易额
                                    </td>
                                    <td>
                                        累计获得提成
                                    </td>
                                </tr>
                                <tr v-for="(item,index) in tableData" :key="index" :class="{ active: index%2==1}">
                                    <th>{{item.num}}</th>
                                    <th>{{item.mode}}</th>
                                    <th>{{item.name}}</th>
                                    <th>{{item.date}}</th>
                                    <th :class="{actives:item.state=='待认证'}">{{item.state}}</th>
                                    <th>{{item.money}}</th>
                                    <th>{{item.moneys}}</th>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
          </div>
    </div>
</template>

<script>
import topBar from "../public/top";
import leftBar from "../public/left";
import homeBar from "../public/homebar";

export default {
  components: {
    leftBar,
    topBar,
    homeBar
  },
  data() {
    return {
      data: "/system",
      currentPage: { path: "/recommends", name: "系统设置" },
      tableData: [
        {
          num: "01",
          mode: "面对面邀请",
          name: "新贵大药房",
          date: "2018-10-20",
          state: "待认证",
          money: "￥10000.00",
          moneys: "￥1000.00"
        },
        {
          num: "02",
          mode: "二维码推荐",
          name: "新贵大药房",
          date: "2018-10-20",
          state: "待认证",
          money: "￥10000.00",
          moneys: "￥1000.00"
        },
        {
          num: "03",
          mode: "手机号码推荐",
          name: "新贵大药房",
          date: "2018-10-20",
          state: "已认证",
          money: "￥10000.00",
          moneys: "￥1000.00"
        },
        {
          num: "04",
          mode: "面对面邀请",
          name: "新贵大药房",
          date: "2018-10-20",
          state: "待认证",
          money: "￥10000.00",
          moneys: "￥1000.00"
        }
      ]
    };
  },
  methods: {
    addPath(n1, n2) {
      //点击切换home-bar
      var obj = {};
      obj.n1 = n1;
      obj.n2 = n2;
      this.$store.commit("addPath", obj);
    }
  }
};
</script>

<style lang="less" scoped>
@import "system.less";
</style>

